<template>
	<gracePage class="page" :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" id="gBody">
			<!-- ------------------------------搜索------------------------------------ -->
			<view class="search-content pl10 pr10 pb10">
				<graceSearch background="#f1f1f1" placeholder="请输入搜索内容" :disabled="true" @click.native="$common.routerTo('../components/search/searchPage?type=1')"></graceSearch>
			</view>
			<!-- --------------------------------轮播------------------------------------------ -->
			<view class="grace-padding-top">
				<graceSwiperCard :swiperItems="params.swiperItems" height="330rpx"></graceSwiperCard>
			</view>

			<view class="grace-body">
				<text class="grace-title">设计师推荐</text>
				<scroll-view class="grace-scroll-x" :show-scrollbar="false" scroll-x>
					<view class="grace-scroll-x-items item-content" v-for="(item,index) in 10" @click="$common.routerTo('../components/designerAbout/designerDetail')">
						<div class="box-item">
							<image class="photo" src="https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/4.png"></image>
							<p class="name">王小波</p>
							<p class="position">资深设计师</p>
						</div>
					</view>
				</scroll-view>
			</view>
			<view class="select_designer_list">
				<view class="grace-margin-top">
					<graceNavBar :items="tabs" :currentIndex="currentIndex" @change="navChange" isCenter activeDirection="center" :size="150"></graceNavBar>
					<!-- <graceNavBar :items="params.tabs" :currentIndex="params.currentIndex" isCenter activeDirection="center" :size="150" @change="navChange"></graceNavBar> -->
				</view>
				<swiper :style="{height:mainHeight+'px'}" :current="currentIndex" @change="swiperChange">
					<swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
						<scroll-view scroll-y="true" :style="{height:mainHeight+'px'}" @scrolltolower="scrollend" @scroll="scroll"
						 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
							<graceReload ref="graceReload" width="700rpx" marginLeft="25rpx" @reload="reload"></graceReload>
							<graceEmpty v-if="news == 'empty'">
								<view slot="img" class="empty-view">
									<!-- 请根据您的项目要求制作并更换为空图片 -->
									<image class="empty-img" mode="widthFix" src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
								</view>
								<text slot="text" class="grace-text-small grace-gray">本栏目暂无新闻</text>
							</graceEmpty>
							<view style="padding:0 25rpx;">
								<block v-for="(item, index) in news" :key="index" v-if="news != 'empty'">
									<view class="item_swiper" >
										<image class="photo" src="https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/4.png" mode=""></image>
										<view class="content">
											<view class="title">
												<view class="name">王小波 <text class="ml10">从业</text>10<text>年</text></view>
												<view class="price">28888 <text>/元</text></view>
											</view>
											<view class="style">擅长风格：北欧、古风 </view>
											<view class="case">设计案例：唐城一品、塞纳湖畔</view>
										</view>
									</view>
								</block>
							</view>
							<graceLoading :loadingType="loadingTypes[newsIndex]"></graceLoading>
						</scroll-view>
					</swiper-item>
				</swiper>

	

				<!-- <swiper :current="params.currentIndex" @change="swiperChange">
					<swiper-item class="demo" v-for="(item, index) in params.tabs" :key="index">
						<view class="item_swiper" v-for="(item,index) in 10" :key="index" >
							<image class="photo" src="https://graceui.oss-cn-beijing.aliyuncs.com/demoimgs/4.png" mode=""></image>
							<view class="content">
								<view class="title">
									<view class="name">王小波 <text class="ml10">从业</text>10<text>年</text></view>
									<view class="price">28888 <text>/元</text></view>
								</view>
								<view class="style">擅长风格：北欧、古风 </view>
								<view class="case">设计案例：唐城一品、塞纳湖畔</view>
							</view>
						</view>
					</swiper-item>
				</swiper> -->
			</view>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from "../../graceUI/components/gracePage.vue";
	import graceSearch from "../../graceUI/components/graceSearch.vue";
	import graceNavBar from "../../graceUI/components/graceNavBar.vue";
	import graceSwiperCard from "../../graceUI/components/graceSwiperCard.vue";
	import graceLoading from "../../graceUI/components/graceLoading.vue";
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceReload from '../../graceUI/components/graceReload.vue';
	export default {
		data() {
			return {
				currentIndex: 0,
				mainHeight: 600,
				//分类数据
				tabsAll: [],
				tabs: [],
				// 新闻信息保存数组
				newsAll: [],
				// 每个选项卡对应的分页
				pages: [],
				// 加载状态
				loadingTypes: [],
				// 每个滚动区域的滚动值
				scrollTops: [],
				params: {
					currentIndex: 0,
					tabs: ['关注', '推荐', '体育', '热点', '国内', '国外', '其他'],
					swiperItems: [{
							img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/1.png',
							url: '',
							opentype: 'navigate'
						},
						{
							img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/2.png',
							url: '',
							opentype: 'navigate'
						},
						{
							img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/3.png',
							url: '',
							opentype: 'navigate'
						},
						{
							img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/4.png',
							url: '',
							opentype: 'navigate'
						},
						{
							img: 'https://graceui.oss-cn-beijing.aliyuncs.com/swiperimgs/5.png',
							url: '',
							opentype: 'navigate'
						}
					]
				}
			}
		},
		onReady: function() {
			setTimeout(() => {
				uni.createSelectorQuery().select('#gBody').fields({
					size: true
				}, (res) => {
					this.mainHeight = res.height;
				}).exec();
			}, 1000);
			//加载分类信息 初始化数据
			this.getCate();
		},
		watch: {
			currentIndex: function(nVal, oldVal) {
				if ((this.loadingTypes[this.currentIndex] != 2 || this.loadingTypes[this.currentIndex] != 4) && this.pages[this.currentIndex] <
					2) {
					this.getNews();
				}
			}
		},
		onLoad: function() {},
		methods: {
			navChange: function(e) {
				this.currentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.currentIndex = index;
			},
			//加载分类信息 初始化数据
			getCate: function() {
				console.log('9999')
				uni.request({
					// 此处可以获取分类 根据分类自己拼接请求地址
					// 格式请参考 接口 [ 浏览器运行直接查看 ]
					url: 'http://grace.hcoder.net/api/tabs',
					method: 'GET',
					data: {},
					success: res => {
						// 初始化新闻列表数组 元素数量与分类匹配
						this.tabsAll = res.data.data;
						for (var i = 0; i < this.tabsAll.length; i++) {
							this.newsAll.push([]);
							this.tabs.push(this.tabsAll[i].txt);
							this.pages.push(1);
							this.loadingTypes.push(3);
							this.scrollTops.push(0);
						}
						this.getNews();
					}
				});
			},
			// 加载新闻
			getNews: function(isReload) {
				// 当前正在展示的 选项index 为 this.currentIndex
				// 那么分类 id 应该为 this.tabsAll[this.currentIndex].id
				//console.log('类型 : ' + this.tabs[this.currentIndex] + ' 第'+ this.pages[this.currentIndex] +'页');
				if (!isReload) {
					this.loadingTypes.splice(this.currentIndex, 1, 1);
				}
				//console.log('http://grace.hcoder.net/api/news/index/'+this.tabsAll[this.currentIndex].id+'/'+this.pages[this.currentIndex]);
				uni.request({
					// 此处可以获取分类 根据分类自己拼接请求地址
					// 分类 id 、页码 都已经获取到了
					url: 'http://grace.hcoder.net/api/news/index/' + this.tabsAll[this.currentIndex].id + '/' + this.pages[this.currentIndex],
					method: 'GET',
					data: {},
					success: res => {
						if (res.data.status == 'ok') {
							// 第一页
							if (this.pages[this.currentIndex] == 1) {
								this.newsAll.splice(this.currentIndex, 1, res.data.data);
							}
							// 之后的加载页
							else {
								this.newsAll[this.currentIndex] = this.newsAll[this.currentIndex].concat(res.data.data);
							}
							// 页码增加
							this.pages[this.currentIndex]++;
							setTimeout(() => {
								this.loadingTypes.splice(this.currentIndex, 1, 3);
							}, 300)
						} else if (res.data.status == 'empty') {
							console.log('empty');
							this.newsAll[this.currentIndex] = 'empty';
							this.loadingTypes.splice(this.currentIndex, 1, 4);
						} else if (res.data.status == 'nomore') {
							console.log('nomore');
							this.loadingTypes.splice(this.currentIndex, 1, 2);
						}
					},
					complete: () => {
						if (isReload) {
							setTimeout(() => {
								this.$refs.graceReload[this.currentIndex].endReload();
							}, 300)
						}
					}
				});
			},
			// 点击新闻列表
			newsinfo: function() {
				uni.showToast({
					title: "请在api接口返回新闻id，利用此函数打开新闻详情页面",
					icon: "none"
				})
			},
			// 加载更多
			scrollend: function(e) {
				// 判断加载状态避免多次滚动时有加载尚未完成
				if (this.loadingTypes[this.currentIndex] == 2 || this.loadingTypes[this.currentIndex] == 4) {
					return false;
				}
				console.log('loadmore.....');
				this.getNews();
			},
			scroll: function(e) {
				this.scrollTops[this.currentIndex] = e.detail.scrollTop;
			},
			touchstart: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchstart(touchObj);
			},
			touchmove: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchmove(touchObj);
			},
			touchend: function(e) {
				var touchObj = {
					scrollTop: this.scrollTops[this.currentIndex],
					moveY: e.changedTouches[0].pageY
				};
				this.$refs.graceReload[this.currentIndex].touchend(touchObj);
			},
			// 下拉刷新
			reload: function() {
				this.pages[this.currentIndex] = 1;
				this.loadingTypes.splice(this.currentIndex, 1, 3);
				this.getNews(1);
			}
		},
		components: {
			gracePage,
			graceSearch,
			graceSwiperCard,
			graceNavBar,
			graceEmpty,
			graceLoading,
			graceReload
		}
	}
</script>
<style lang="less" scoped>
	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 300rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-text-small {
		margin-top: 10px;
	}

	.page {
		background: #F1F1F1;

		.search-content {
			background-color: #fff;
		}

		.item-content {
			width: 180rpx;
			height: 300rpx;

			.box-item {
				.photo {
					width: 161rpx;
					height: 200rpx;
					background-color: #f9efe9;
					border-radius: 8rpx;
				}

				.name {
					font-size: 32rpx;
					font-weight: bold;
					font-stretch: normal;
					letter-spacing: 0px;
					color: #333333;
				}

				.position {
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0px;
					color: #aaaaaa;
				}
			}
		}

		.item_swiper {
			margin: 20rpx;
			background: #fff;
			padding: 35rpx 25rpx 10rpx 16rpx;
			display: flex;

			.photo {
				width: 166rpx;
				height: 147rpx;
				background-color: #3bdc70;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.content {
				flex: 1;

				.title {
					display: flex;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						font-stretch: normal;
						line-height: 42rpx;
						letter-spacing: 0px;
						color: #3c3c3c;

						text {
							font-size: 24rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 42rpx;
							letter-spacing: 0px;
							color: #aaaaaa;
						}
					}

					.price {
						font-size: 48rpx;
						font-weight: bold;
						font-stretch: normal;
						line-height: 42rpx;
						letter-spacing: 0px;
						color: #f7c926;

						text {
							font-size: 24rpx;
							font-weight: bold;
							font-stretch: normal;
							line-height: 42rpx;
							letter-spacing: 0px;
							color: #f7c926;
						}
					}
				}

				.style {
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 36rpx;
					letter-spacing: 0px;
					color: #aaaaaa;
				}

				.case {
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 36rpx;
					letter-spacing: 0px;
					color: #aaaaaa;
				}
			}
		}
	}
</style>
